<template>
	<form @submit="subform">
		<view class="content">
			<view class="info-item" @tap="goto" data-url="/pages/my/set">
				<view class="t1">个人设置</view>
				<view class="t2"></view>
				<image class="t3" src="/static/img/arrowright.png" />
			</view>
		</view>
		<view class="apply_box">
			<view class="apply_item">
				<view>简介：</view>
				<view class="flex-y-center" style="width: 100%;padding-top: 32rpx;">
					<textarea name="about" v-model="info.about" placeholder="请输入简介"></textarea>
				</view>
			</view>
			<!-- 		<view class="apply_item">
				<view>客服链接</view>
				<view class="flex-y-center"><input type="text" name="cus_ser_link" v-model="info.cus_ser_link"
						placeholder="请填写客服链接"></input></view>
			</view> -->
			<view class="apply_item">
				<view>地址</view>
				<view class="flex-y-center"><input type="text" placeholder="请选择地址" name="address" :value="info.address"
						@tap="locationSelect"></input></view>
			</view>
		</view>
		<uv-button color="#FF1818" @tap="save"
			:custom-style="{width: `268rpx`,height: `72rpx`, borderRadius:`16rpx`, fontSize: `32rpx`}">提交</uv-button>
	</form>

</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt: null,
				info: {
					about: '',
					cus_ser_link: '',
					address: ''
				}
			}
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getSet()
		},
		methods: {
			getSet() {
				app.showLoading("加载中")
				const that = this
				app.get("ApiLuntan/UserSet", {
					user_id: that.opt.user_id
				}, (res) => {
					if (res.status == 1 && res.data) {
						that.info = res.data
					}
					app.showLoading(false)
				})
			},
			locationSelect: function() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						that.info.address = res.address;
					},
					fail(err) {
						console.log("Select location fail!", err)
					}
				});
			},

			save() {
				const that = this

				app.showLoading("保存中")
				app.post("ApiLuntan/UserSet", {
					about: that.info.about,
					id: that.info.id,
					cus_ser_link: that.info.cus_ser_link,
					address: that.info.address
				}, (res) => {
					if (res.status == 1) {
						uni.showToast({
							title: '保存成功',
							icon: "success"
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1800)

						// that.getSet()
					}
					app.showLoading(false)
				})
			}
		}
	}
</script>

<style>
	.apply_box {
		padding: 2rpx 24rpx 0 24rpx;
		background: #fff;
		margin: 24rpx;
		border-radius: 10rpx
	}

	.apply_item {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee
	}

	.apply_item view:first-child,
	.apply_item text:first-child {
		min-width: 140rpx;
	}

	.apply_box .apply_item:last-child {
		border: none
	}

	.apply_item input {
		width: 100%;
		border: none;
		color: #111;
		font-size: 28rpx;
		text-align: right
	}

	.apply_item input::placeholder {
		color: #999999
	}

	.apply_item textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 0rpx 0;
		border: none;
		font-size: 28rpx;
		line-height: 28rpx;
	}

	.content {
		width: 94%;
		margin: 20rpx 3%;
		background: #fff;
		border-radius: 5px;
		padding: 0 20rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		width: 100%;
		background: #fff;
		padding: 0 3%;
		border-bottom: 1px #f3f3f3 solid;
		height: 96rpx;
		line-height: 96rpx
	}

	.info-item:last-child {
		border: none
	}

	.info-item .t1 {
		width: 200rpx;
		color: #8B8B8B;
		font-weight: bold;
		height: 96rpx;
		line-height: 96rpx
	}

	.info-item .t2 {
		color: #444444;
		text-align: right;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.info-item .t3 {
		width: 26rpx;
		height: 26rpx;
		margin-left: 20rpx
	}
</style>